<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>火灾直接财产损失申报统计表</h1>
      </div>
      <p flex="main:justify" /><p flex="main:justify">
        <!-- <span>受损单位（印章）/个人：杭州滨江区江陵路111号门</span>
        <span>地址：xx市xx路xx号</span> -->
        <span>起火单位（地址）：
          <input v-if="patternIsEdit" v-model="tableData.address" type="text" class="custom_input">
          <span v-else>{{ tableData.address }}</span>
        </span>
        <span>提取日期：
          <input v-if="patternIsEdit" v-model="tableData.alarmTimeDate" type="date" class="custom_input">
          <span v-else>{{ tableData.alarmTimeDate }}</span>
        </span>
      </p>
      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <th colspan="10">以下由受损单位（个人）填写</th>
          <th colspan="10">以下由公安机关消防机构填写</th>
        </tr>
        <tr>
          <th rowspan="10">建构筑物及装修</th>
          <th>序号</th>
          <th colspan="2">建筑结构及装修名称</th>
          <th colspan="2">烧损面积（m2）</th>
          <th colspan="2">建造时价格（元）</th>
          <th colspan="2">已使用时间（年）</th>
          <th colspan="2">折旧年限（年）</th>
          <th colspan="2">烧损率（%）</th>
          <th colspan="2">烧损面积（m2）</th>
          <th colspan="2">重置价值或修复费（元）</th>
          <th colspan="2">统计损失（元）</th>
        </tr>
        <tr v-for="index in 8" :key="index">
          <td>
            <input v-if="patternIsEdit" v-model="tableData.age" type="number">
            <span v-else>{{ tableData.age }}</span>
          </td>
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
        </tr>
        <tr>
          <td colspan="9">申报损失小计 200000 元</td>
          <td colspan="10">统计损失小计 200000 元</td>
        </tr>
        <tr>
          <th rowspan="10">设备及其他财产</th>
          <th rowspan="2">序号</th>
          <th rowspan="2" colspan="2">名称</th>
          <th rowspan="2" colspan="2">数量</th>
          <th rowspan="2" colspan="2">购进时单价（元）</th>
          <th rowspan="2" colspan="2">已使用时间（年）</th>
          <th rowspan="2" colspan="2">折旧年限（年）</th>
          <th rowspan="2" colspan="2">烧损率（%）</th>
          <th colspan="4">重置价值</th>
          <!-- <th colspan="2">重置价值或修复费（元）</th> -->
          <th rowspan="2" colspan="2">统计损失（元）</th>
        </tr>
        <tr>
          <th colspan="2">单价</th>
          <th colspan="2">数量</th>
        </tr>
        <tr v-for="index in 7" :key="index+'-'">
          <td />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="2" />
        </tr>
        <tr>
          <td colspan="9">申报损失小计 200000 元</td>
          <td colspan="10">统计损失小计 200000 元</td>
        </tr>
        <tr>
          <th colspan="10">申报损失总计 292500 元</th>
          <th colspan="10">统计损失总计 99830 元</th>
        </tr>
        <tr>
          <th colspan="10">
            <div style="height:120px;padding:0 10px;line-height:32px">
              <div class="text_align_left">受损单位（个人）填表人（签名）：xxx</div>
              <div class="text_align_right">申报日期：2012年11月2日</div>
              <div class="text_align_left ">受损单位（个人）联系人：xxx</div>
              <div class="text_align_right">联系电话：15565452265</div>
            </div>
          </th>
          <th colspan="10" style="line-height:36px">
            <!-- <div style="height:120px;padding:0 10px;line-height:32px">
              <div>统计单位：杭州市公安消防支队</div>
              <div>统计人（签名）：xxx 2012年11月6日</div>
              <div>审批人（签名）：xxx 2012年11月6日</div>
            </div> -->
            <div>统计单位：杭州市公安消防支队</div>
            <div>统计人（签名）：xxx 2012年11月6日</div>
            <div>审批人（签名）：xxx 2012年11月6日</div>
          </th>
        </tr>
      </table>
      <!-- <p class="margin_top_20">此文书由公安机关消防机构存档</p> -->
      <p class="margin_top_20">说明：1.受损单位（个人）应当于火灾扑灭之日起七个工作日内向火灾发生地的县级公安机关消防机构如实申报火灾直接财产损失，并附有有效证明材料。一人单位（个人）一表。
        <br>2.需要文字说明的事项可附页载明。</p>
    </div>
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
export default {
  data() {
    return {
      patternIsEdit: false,
      loading: false,
      url: '/register',
      tableData: {
        'address': '',
        'age': 0,
        'alarmMode': '119台转入',
        'alarmTime': parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
        'alarmTimeDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'alarmTimeTime': parseTime(new Date(), '{h}:{i}'),
        'alarmerAddress': '',
        'briefly': '',
        'caseOpinion': '',
        'detailedAddress': '',
        'flag': 0,
        'id': 0,
        'leaderInstructions': '',
        'leaderOpinion': '',
        'name': '',
        'outSituation': '',
        'remark': '',
        'sex': 0,
        'title': '',
        'workUnit': ''
      }
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
      formData.title = '火灾调查登记表' + formData.name
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        this.tableData = res.data
        const [alarmTimeDate, alarmTimeTime] = this.tableData.alarmTime.split(' ')
        this.tableData.alarmTimeDate = alarmTimeDate
        this.tableData.alarmTimeTime = alarmTimeTime
      })
    }

  }
}
</script>
